import { UserInfo } from '@/constants';
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
  LoginOutlined,
} from '@ant-design/icons';
import { Avatar, Button, Dropdown, type MenuProps } from 'antd';
import { useState } from 'react';
export default () => {
  const [fullScreen, setFullScreen] = useState(false);
  const Menus: MenuProps['items'] = [
    {
      key: 'logout',
      label: (
        <div className=" flex items-center">
          <LoginOutlined className="mr-2"></LoginOutlined>
          <span>退出系统</span>
        </div>
      ),
    },
  ];

  const handleFullScreen = () => {
    setFullScreen((preStata) => {
      if (!preStata) {
        document.body.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
      return !preStata;
    });
  };
  return (
    <div className="flex h-full items-center mr-2">
      <Button
        type="text"
        onClick={handleFullScreen}
        icon={
          fullScreen ? (
            <FullscreenOutlined></FullscreenOutlined>
          ) : (
            <FullscreenExitOutlined></FullscreenExitOutlined>
          )
        }
      ></Button>
      <Dropdown menu={{ items: Menus }} placement="bottom" arrow>
        <div className="flex items-center px-2 cursor-pointer leading-none">
          <Avatar
            size={24}
            className=" mr-3"
            src="https://vben.vvbin.cn/assets/header-MoI1THJb.jpg"
          ></Avatar>
          {UserInfo.name}
        </div>
      </Dropdown>
    </div>
  );
};
